<script>
import { mapState } from 'vuex';

export default {
  name: 'monthCard',
  data() {
    return {
      cardListParams: {
        // 状态 '0':可用，'1':已过期
        cardStatus: null,
        // 车牌号
        carNumber: '',
        // 车主姓名
        personName: '',
        // 页数
        page: 1,
        // 条数
        pageSize: 10,
      },
      loading: false,
      selectIds: [],
    };
  },
  methods: {
    //用于派发action获取月卡占有率的回调函数
    async fetchCardProportion() {
      try {
        this.$store.dispatch('monthCardStore/fetchCardProportionAction');
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    // 用于派发action获取月卡列表的回调函数
    async fetchCardList() {
      try {
        this.loading = true;
        await this.$store.dispatch('monthCardStore/fetchCardListAction', this.cardListParams);
      } catch (error) {
        this.$message.error(error.message);
      } finally {
        this.loading = false;
      }
    },
    // 每页展示数据条数发生变化的回调函数
    handleSizeChange(pageSize) {
      this.cardListParams.pageSize = pageSize;
      this.fetchCardList();
    },
    // 当前页发生变化的回调函数
    handleCurrentChange(page) {
      this.cardListParams.page = page;
      this.fetchCardList();
    },
    // 点击查询按钮的回调函数
    handleSearch() {
      this.cardListParams.page = 1;
      this.fetchCardList();
    },
    // 点击删除按钮的回调函数
    async handleDeleteCard(row) {
      const confirm = await this.$confirm(`此操作将永久删除${row.personName}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch(error => error);
      if (confirm === 'cancel') return;
      try {
        const deleteResult = await this.$store.dispatch('monthCardStore/deleteCardListAction', row.id);
        this.$message.success(deleteResult);
        await this.fetchCardList();
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    // 点击批量删除的回调函数
    async handleBatchDeleteCard() {
      if (!this.selectIds.length) return this.$message.warning('请选择批量删除的月卡');
      const confirm = await this.$confirm(`此操作将批量删除, 是否继续?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).catch(error => error);
      if (confirm === 'cancel') return;
      this.loading = true;
      try {
        const deleteResult = await this.$store.dispatch('monthCardStore/deleteCardListAction', this.selectIds);
        this.$message.success(deleteResult);
        await this.fetchCardList();
      } catch (error) {
        this.$message.error(error.message);
      } finally {
        this.loading = false;
      }
    },
    // 点击添加月卡按钮的回调函数
    handleAdd() {
      this.$router.push({
        path: '/controlsCard',
        query: {
          controls: 'addCard',
        },
      });
    },
    // 点击续费月卡按钮的回调函数
    handleRenew(id) {
      this.$router.push({
        path: '/controlsCard',
        query: {
          controls: 'renewCard',
          id,
        },
      });
    },
    // 点击查看月卡按钮的回调函数
    handleView(id) {
      this.$router.push({
        path: '/controlsCard',
        query: {
          controls: 'viewCard',
          id,
        },
      });
    },
    // 点击编辑月卡按钮的回调函数
    handleEdit(id) {
      this.$router.push({
        path: '/controlsCard',
        query: {
          controls: 'editCard',
          id,
        },
      });
    },
    //当用户手动勾选表格数据行的 Checkbox 时触发的回调函数
    handleSelect(select, row) {
      this.selectIds = select.map(item => item.id).join(',');
    },
    // 用于格式化状态的回调函数
    formatStatues(row, column, cellValue, index) {
      const MAP = {
        0: '已用',
        1: '已过期',
      };
      return MAP[row.cardStatus] || '未知';
    },
  },
  mounted() {
    this.fetchCardList();
    this.fetchCardProportion();
  },
  computed: {
    ...mapState('monthCardStore', ['total', 'cardList', 'cardProportion']),
  },
};
</script>

<template>
  <div class="month-card-container">
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <el-form inline size="small">
          <el-form-item label="车牌号码:">
            <el-input size="small" placeholder="请输入车牌号码" v-model="cardListParams.carNumber"></el-input>
          </el-form-item>
          <el-form-item label="车主姓名:">
            <el-input size="small" placeholder="请输入车主姓名" v-model="cardListParams.personName"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select placeholder="请选择状态" size="small" v-model="cardListParams.cardStatus">
              <el-option :value="undefined" label="全部"></el-option>
              <el-option value="0" label="可用"></el-option>
              <el-option value="1" label="已过期"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" icon="el-icon-search" :loading="loading" @click="handleSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-row>
        <el-col :span="15">
          <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAdd">添加月卡</el-button>
          <el-button size="small" type="primary" icon="el-icon-delete" :loading="loading" @click="handleBatchDeleteCard">批量删除</el-button>
        </el-col>
        <el-col :span="8">
          <el-alert :title="`本园区共计 ${cardProportion.spaceNumber||0} 个车位，月卡用户 ${cardProportion.cardCount||0} 人，车位占有率 ${cardProportion.proportion||0}`" type="info" show-icon :closable="false"></el-alert>
        </el-col>
      </el-row>
      <el-table border size="small" stripe :header-cell-style="{background:'#f4f6f8',color:'#000'}" :data="cardList" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 1)" @selection-change="handleSelect">
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column type="index" label="序号" align="center"></el-table-column>
        <el-table-column prop="personName" label="车主名称" align="center" width="100"></el-table-column>
        <el-table-column prop="phoneNumber" label="联系方式" align="center" width="120"></el-table-column>
        <el-table-column prop="carNumber" label="车牌号码" align="center"></el-table-column>
        <el-table-column prop="carBrand" label="车辆品牌" align="center"></el-table-column>
        <el-table-column prop="totalEffectiveDate" label="剩余有效天数" align="center"></el-table-column>
        <el-table-column :formatter="formatStatues" label="状态" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{row}">
            <el-button type="text" @click="handleRenew(row.id)">续费</el-button>
            <el-button type="text" @click="handleView(row.id)">查看</el-button>
            <el-button type="text" @click="handleEdit(row.id)">编辑</el-button>
            <el-button type="text" @click="handleDeleteCard(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="cardListParams.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="cardListParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background>
      </el-pagination>
    </el-card>
  </div>
</template>

<style scoped lang="scss">

.month-card-container {
  padding: 15px;


  ::v-deep .el-alert--info {
    width: 450px;
    background-color: #e6f7ff !important;
    border: 1px solid #91d5ff;
    color: #000000;

    .el-alert__icon {
      color: #1890ff;
    }
  }

}
</style>
